<template>
  <view class="content" v-if="data">
    <!-- #ifndef MP-TOUTIAO -->
    <singleHeader pageTitle="店铺信息"></singleHeader>
    <!-- #endif -->

    <view class="mForm">
      <view class="mFormItem mFormItem1" @click="edit(-1)">
        <view class="mFormLet">店铺LOGO</view>

        <view class="mFormRig">
          <image :src="data.logo" mode="aspectFill" class="tx"></image>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>

    <view class="mForm">
      <view class="mFormItem" @click="edit(0)">
        <view class="mFormLet">店铺名称</view>

        <view class="mFormRig">
          <view class="inp">{{ data.name }}</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
      <view class="mFormItem" @click="edit(1)">
        <view class="mFormLet">地址信息</view>

        <view class="mFormRig">
          <view class="inp">{{ data.address }}</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>

    <view class="mForm">
      <view class="mFormItem" @click="edit(2)">
        <view class="mFormLet">PC后台账户</view>

        <view class="mFormRig">
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import { getStoreInfo, setStoreInfo } from "@/api/admin";

export default {
  components: {
    singleHeader
  },

  data() {
    return {
      data: null,
      placeholderStyle: "color:#888;",
      text: ""
    };
  },

  computed: {},

  onLoad() {
    this.$utils.hideShareMenu();
  },

  onShow() {
    getStoreInfo().then((res) => {
      this.data = res.data;
    });
  },

  methods: {
    edit(type) {
      let url = `/admin/shop/edit/index?type=${type}`;

      if (type === -1) {
        this.$utils.uploadImage(1, (logo) => {
          setStoreInfo({
            logo
          }).then((e) => {
            if (!e.code) {
              this.$set(this.data, "logo", logo);
            }
          });
        });
        return;
      } else if (type === 2) {
        url = `/admin/shop/info/index`;
      }

      uni.navigateTo({
        url
      });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }

  &.mFormItem1 {
    padding: 12rpx 0;
  }
}

.mFormRig {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mForm {
  margin-bottom: 12rpx;
  padding: 0 24rpx;
  background: #fff;

  .tx {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    background: #f2f2f2;
  }

  .icon-arrow-right {
    margin-left: 10rpx;
  }

  .inp {
    text-align: right;
    font-size: 28rpx;
    height: 100rpx;
    line-height: 100rpx;
    flex: 1;
  }
}

.mFormLet {
  font-size: 30rpx;
  color: #1d1d1d;
}
</style>
